<template>
  <div class="project-main">
    <div class="content">
      <div class="header">
        <span class="title">
          {{ status == "edit" ? listByEdit[type] : listByLook[type] }}
        </span>
        <span class="back" @click="$router.go(-1)">返回</span>
      </div>
      <el-form ref="form" :model="form1" label-position="top" v-if="type == 0">
        <el-form-item label="今日完成工作">
          <el-input
            type="textarea"
            v-model="form1.day_finished"
            placeholder="请输入"
            :disabled="status == 'look'"
          ></el-input>
        </el-form-item>
        <el-form-item label="今日未完成工作">
          <el-input
            type="textarea"
            v-model="form1.day_unfinished"
            placeholder="请输入"
            :disabled="status == 'look'"
          ></el-input>
        </el-form-item>
        <el-form-item label="需协调工作">
          <el-input
            type="textarea"
            v-model="form1.coordinate"
            placeholder="请输入"
            :disabled="status == 'look'"
          ></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input
            type="textarea"
            v-model="form1.remark"
            placeholder="请输入"
            :disabled="status == 'look'"
          ></el-input>
        </el-form-item>
        <el-form-item v-if="status != 'look'">
          <el-button @click="save">提 交</el-button>
        </el-form-item>
      </el-form>
      <el-form ref="form" :model="form2" label-position="top" v-if="type == 1">
        <el-form-item label="本周完成工作">
          <el-input
            type="textarea"
            v-model="form2.week_finished"
            placeholder="请输入"
            :disabled="status == 'look'"
          ></el-input>
        </el-form-item>
        <el-form-item label="本周工作总结">
          <el-input
            type="textarea"
            v-model="form2.week_unfinished"
            placeholder="请输入"
            :disabled="status == 'look'"
          ></el-input>
        </el-form-item>
        <el-form-item label="下周工作安排">
          <el-input
            type="textarea"
            v-model="form2.next_plan"
            placeholder="请输入"
            :disabled="status == 'look'"
          ></el-input>
        </el-form-item>
        <div class="files" v-if="status != 'look'">
          <p class="label-name">附件1-《项目问题清单推进表》 上传：</p>
          <el-upload
            class="upload-demo"
            action=""
            ref="upload1"
            accept=".docx,.pdf"
            :before-upload="beforeUpload"
            :http-request="uploadFile1"
            :on-remove="handleRemove1"
            :auto-upload="false"
            :file-list="fileList1"
            :limit="1"
            :show-file-list="false"
            :on-change="changeFile1"
          >
            <el-button size="small" type="primary">
              <img src="~@img/project/icon-add.png" alt="" />点击上传
            </el-button>
            <div slot="tip" class="el-upload__tip">
              （上传文件的类型docx、pdf）
            </div>
          </el-upload>
          <div class="placeholder-height">
            <div
              v-for="item of changeFileList1"
              :key="item.name"
              class="file-list"
            >
              <img
                v-if="
                  item.name.split('.')[item.name.split('.').length - 1] ==
                    'xls' ||
                    item.name.split('.')[item.name.split('.').length - 1] ==
                      'xlsx'
                "
                src="~@img/upload/icon-excel.png"
                alt=""
              />
              <img
                v-if="
                  item.name.split('.')[item.name.split('.').length - 1] == 'pdf'
                "
                src="~@img/upload/icon-pdf.png"
                alt=""
              />
              <img
                v-if="
                  item.name.split('.')[item.name.split('.').length - 1] ==
                    'docx'
                "
                src="~@img/upload/icon-word.png"
                alt=""
              />

              <img src="" alt="" />
              <span class="name">{{ item.name }}</span>
              <span @click="lookFile(item)" class="img111">
                <img src="~@img/upload/icon-eye.png" alt="" />
                <span class="s">预览</span>
              </span>
              <span @click="delFile1(item.uid)" class="img222">
                <img src="~@img/upload/icon-delete.png" alt="" />
                <span class="d">删除</span>
              </span>
            </div>
          </div>
        </div>
        <div class="pdf-box" v-if="status == 'look'">
          <div class="pdf-title">附件1 - 《项目问题清单推进表》</div>
          <div :class="['pdf', isFull ? 'isAll' : '']">
            <div v-if="!isFull" class="full" @click="isFull = true">全屏</div>
            <div v-if="isFull" class="exit" @click="isFull = false">
              退出全屏
            </div>
            <!--  :src="info.file" -->
            <iframe
              ref="ifRame"
              style="margin-top:30px;"
              :src="form2.url"
              frameborder="0"
            ></iframe>
          </div>
        </div>
        <el-form-item v-if="status != 'look'">
          <el-button @click="save">提 交</el-button>
        </el-form-item>
      </el-form>
      <el-form ref="form" :model="form3" label-position="top" v-if="type == 2">
        <el-form-item label="本月完成工作">
          <el-input
            type="textarea"
            v-model="form3.month_finished"
            placeholder="请输入"
            :disabled="status == 'look'"
          ></el-input>
        </el-form-item>
        <el-form-item label="本月工作总结">
          <el-input
            type="textarea"
            v-model="form3.month_sum"
            placeholder="请输入"
            :disabled="status == 'look'"
          ></el-input>
        </el-form-item>
        <el-form-item label="下月工作安排">
          <el-input
            type="textarea"
            v-model="form3.next_plan"
            placeholder="请输入"
            :disabled="status == 'look'"
          ></el-input>
        </el-form-item>

        <div class="flex-form">
          <div class="files" v-if="status != 'look'">
            <p class="label-name">
              <span style="font-weight:bold;">附件上传</span>
              <br />
              <br />
              附件1-《招商引资项目进展自查报告》
              <br />附件2-《招商引资工作通报》
            </p>
            <el-upload
              class="upload-demo"
              action=""
              ref="upload2"
              accept=".docx,.pdf"
              :before-upload="beforeUpload"
              :http-request="uploadFile2"
              :on-remove="handleRemove2"
              :auto-upload="false"
              :file-list="fileList2"
              multiple
              :limit="2"
              :show-file-list="false"
              :on-change="changeFile2"
            >
              <el-button size="small" type="primary">
                <img src="~@img/project/icon-add.png" alt="" />点击上传
              </el-button>
              <div slot="tip" class="el-upload__tip">
                （上传文件的类型 docx、pdf）
              </div>
            </el-upload>
            <div class="placeholder-height">
              <div
                v-for="item of changeFileList2"
                :key="item.name"
                class="file-list"
              >
                <img
                  v-if="
                    item.name.split('.')[item.name.split('.').length - 1] ==
                      'xls' ||
                      item.name.split('.')[item.name.split('.').length - 1] ==
                        'xlsx'
                  "
                  src="~@img/upload/icon-excel.png"
                  alt=""
                />
                <img
                  v-if="
                    item.name.split('.')[item.name.split('.').length - 1] ==
                      'pdf'
                  "
                  src="~@img/upload/icon-pdf.png"
                  alt=""
                />
                <img
                  v-if="
                    item.name.split('.')[item.name.split('.').length - 1] ==
                      'docx'
                  "
                  src="~@img/upload/icon-word.png"
                  alt=""
                />

                <img src="" alt="" />
                <span class="name">{{ item.name }}</span>
                <span @click="lookFile(item)" class="img111">
                  <img src="~@img/upload/icon-eye.png" alt="" />
                  <span class="s">预览</span>
                </span>
                <span @click="delFile2(item.uid)" class="img222">
                  <img src="~@img/upload/icon-delete.png" alt="" />
                  <span class="d">删除</span>
                </span>
              </div>
            </div>
          </div>
        </div>
        <div class="flex-form">
          <div class="pdf-box" v-if="status == 'look'">
            <div class="pdf-title">附件1-《项目进展自查报告》</div>
            <div :class="['pdf', isFull1 ? 'isAll' : '']">
              <div v-if="!isFull1" class="full" @click="isFull1 = true">
                全屏
              </div>
              <div v-if="isFull1" class="exit" @click="isFull1 = false">
                退出全屏
              </div>
              <!--  :src="info.file" -->
              <iframe
                ref="ifRame"
                style="margin-top:30px;"
                :src="form3.url1"
                frameborder="1"
              >
              </iframe>
              <!-- <iframe
                ref="ifRame"
                style="margin-top:30px;"
                :src="
                  'https://view.officeapps.live.com/op/view.aspx?src=' +
                    form3.url1
                "
                frameborder="0"
              ></iframe> -->
            </div>
          </div>
          <div class="pdf-box" v-if="status == 'look'">
            <div class="pdf-title">附件2-《招商引资工作通报》</div>
            <div :class="['pdf', isFull ? 'isAll' : '']">
              <div v-if="!isFull" class="full" @click="isFull = true">全屏</div>
              <div v-if="isFull" class="exit" @click="isFull = false">
                退出全屏
              </div>
              <!--  :src="info.file" -->
              <iframe
                ref="ifRame"
                style="margin-top:30px;"
                :src="form3.url2"
                frameborder="0"
              ></iframe>
            </div>
          </div>
        </div>

        <el-form-item v-if="status != 'look'">
          <el-button @click="save">提 交</el-button>
        </el-form-item>
      </el-form>
      <el-form ref="form" :model="form4" label-position="top" v-if="type == 3">
        <el-form-item label="季度工作亮点">
          <el-input
            type="textarea"
            v-model="form4.quarter_special"
            placeholder="请输入"
            :disabled="status == 'look'"
          ></el-input>
        </el-form-item>
        <el-form-item label="存在问题">
          <el-input
            type="textarea"
            v-model="form4.problem"
            placeholder="请输入"
            :disabled="status == 'look'"
          ></el-input>
        </el-form-item>
        <el-form-item label="解决措施">
          <el-input
            type="textarea"
            v-model="form4.solution_way"
            placeholder="请输入"
            :disabled="status == 'look'"
          ></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input
            type="textarea"
            v-model="form4.remark"
            placeholder="请输入"
            :disabled="status == 'look'"
          ></el-input>
        </el-form-item>
        <el-form-item v-if="status != 'look'">
          <el-button @click="save">提 交</el-button>
        </el-form-item>
      </el-form>
      <el-form ref="form" :model="form5" label-position="top" v-if="type == 4">
        <el-form-item label="半年完成工作">
          <el-input
            type="textarea"
            v-model="form5.half_year_finished"
            placeholder="请输入"
            :disabled="status == 'look'"
          ></el-input>
        </el-form-item>
        <el-form-item label="半年度工作总结">
          <el-input
            type="textarea"
            v-model="form5.half_year_sum"
            placeholder="请输入"
            :disabled="status == 'look'"
          ></el-input>
        </el-form-item>
        <el-form-item label="下半年工作计划">
          <el-input
            type="textarea"
            v-model="form5.next_plan"
            placeholder="请输入"
            :disabled="status == 'look'"
          ></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input
            type="textarea"
            v-model="form5.remark"
            placeholder="请输入"
            :disabled="status == 'look'"
          ></el-input>
        </el-form-item>
        <el-form-item v-if="status != 'look'">
          <el-button @click="save">提 交</el-button>
        </el-form-item>
      </el-form>
      <el-form ref="form" :model="form6" label-position="top" v-if="type == 5">
        <el-form-item label="年度完成工作">
          <el-input
            type="textarea"
            v-model="form6.year_finished"
            placeholder="请输入"
            :disabled="status == 'look'"
          ></el-input>
        </el-form-item>
        <el-form-item label="年度工作总结">
          <el-input
            type="textarea"
            v-model="form6.year_sum"
            placeholder="请输入"
            :disabled="status == 'look'"
          ></el-input>
        </el-form-item>
        <el-form-item label="来年工作计划">
          <el-input
            type="textarea"
            v-model="form6.next_plan"
            placeholder="请输入"
            :disabled="status == 'look'"
          ></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input
            type="textarea"
            v-model="form6.remark"
            placeholder="请输入"
            :disabled="status == 'look'"
          ></el-input>
        </el-form-item>
        <el-form-item v-if="status != 'look'">
          <el-button @click="save">提 交</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="file-show" v-if="openFile">
      <div class="gb" @click="closeFileShow">关 闭</div>
      <iframe v-if="showFileBySrc" :src="fileSrc" frameborder="0"></iframe>
      <div v-else ref="word" class="word"></div>
    </div>
  </div>
</template>
<script>
let docx = require("docx-preview");
import {
  EditDaily,
  EditWeekly,
  EditMonth,
  EditQuarter,
  EditHalfYear,
  EditYear,
  GetLogDetail,
} from "@/api/project/log";

export default {
  data() {
    return {
      openFile: false,
      fileSrc: "",
      showFileBySrc: "",
      changeFileList1: [],
      changeFileList2: [],

      id: "",
      type: "",
      status: "",
      form1: {
        day_finished: "",
        day_unfinished: "",
        coordinate: "",
        remark: "",
      },
      form2: {
        week_finished: "",
        week_unfinished: "",
        next_plan: "",
      },
      form3: {
        month_finished: "",
        month_sum: "",
        next_plan: "",
      },
      form4: {
        quarter_special: "",
        problem: "",
        solution_way: "",
        remark: "",
      },
      form5: {
        half_year_finished: "",
        half_year_sum: "",
        next_plan: "",
        remark: "",
      },
      form6: {
        year_finished: "",
        year_sum: "",
        next_plan: "",
        remark: "",
      },

      listByEdit: [
        "日报更新",
        "周调度报告填写",
        "月通报填写",
        "季观摩填写",
        "半年晾晒填写",
        "年度总结填写",
        "督办通知单填写",
        "专项督查报告填写",
      ],
      listByLook: [
        "日报查看",
        "周调度报告查看",
        "月通报查看",
        "季观摩查看",
        "半年晾晒查看",
        "年度总结查看",
        "督办通知单查看",
        "专项督查报告查看",
      ],
      fileList1: [],
      fileList2: [],

      info: {
        file:
          "http://39.100.39.50:8006/static/pdf/关于《关于做好享受税收优惠政策的集成电路企业或项目、软件企业清单制定工作有关要求的通知》有关问题的解答.pdf",
      },
      isFull1: false,
      isFull: false,
      files: [],
    };
  },

  mounted() {
    //  type    类型
    //  id      项目id
    //  status  查看 || 编辑

    let { type, id, status } = { ...this.$route.params };
    console.log({ type, id, status });
    this.id = parseInt(id);
    this.type = parseInt(type);
    this.status = status;
    if (this.status == "look") {
      this.GetLogDetail();
    }
  },
  methods: {
    closeFileShow() {
      this.openFile = false;
      this.fileSrc = "";
    },
    async GetLogDetail() {
      let type = "";
      switch (this.type) {
        case 0:
          type = "日报记录";
          break;
        case 1:
          type = "周报记录";
          break;
        case 2:
          type = "月报记录";
          break;
        case 3:
          type = "季报记录";
          break;
        case 4:
          type = "半年报记录";
          break;
        case 5:
          type = "年报记录";
          break;
        case 6:
          type = "督办通知单";
          break;
        case 7:
          type = "专项督查报告";
          break;
      }
      console.log({
        log_id: this.id,
        log_type: type,
      });
      let res = await GetLogDetail({
        log_id: this.id,
        log_type: type,
      });
      console.log(res);

      if (res.code && res.code != 0) {
        return;
      } else {
        if (type == "日报记录") {
          this.form1 = res;
        } else if (type == "周报记录") {
          this.form2 = res;
          this.form2 = {
            ...res,
            url: res.url
              ? window.location.origin + "/#/files?url=" + res.url
              : "",
          };
        } else if (type == "月报记录") {
          this.form3 = res;
          this.form3 = {
            ...res,
            url1: res.url1
              ? window.location.origin + "/#/files?url=" + res.url1
              : "",
            url2: res.url2
              ? window.location.origin + "/#/files?url=" + res.url2
              : "",
          };
        } else if (type == "季报记录") {
          this.form4 = res;
        } else if (type == "半年报记录") {
          this.form5 = res;
        } else if (type == "年报记录") {
          this.form6 = res;
        }
      }
    },
    beforeUpload(file, fileList) {
      this.fileName = file.name;
      const isExcel =
        file.name.split(".")[file.name.split(".").length - 1] === "pdf" ||
        file.name.split(".")[file.name.split(".").length - 1] === "docx";
      // const isSize = file.size / 1024 / 1024 < 10;
      if (!isExcel) {
        this.$message({
          message: "只能上传docx或pdf文件!",
          type: "warning",
          showClose: true,
        });
      }
      return isExcel;
    },
    handleRemove1(file, fileList) {
      this.fileList1 = fileList;
      this.changeFileList1 = fileList;
    },
    handleRemove2(file, fileList) {
      this.fileList2 = fileList;
      this.changeFileList2 = fileList;
    },
    changeFile1(file, fileList) {
      this.changeFileList1 = fileList;
    },
    changeFile2(file, fileList) {
      this.changeFileList2 = fileList;
    },
    lookFile(item) {
      console.log(item);
      if (item.name.includes("pdf")) {
        this.showFileBySrc = true;
        let url = window.URL.createObjectURL(item.raw);
        this.fileSrc = url;
        this.openFile = true;
        console.log(this.fileSrc);
      } else {
        this.showFileBySrc = false;
        this.openFile = true;
        this.$nextTick(() => {
          docx.renderAsync(item.raw, this.$refs.word);
        });
      }
    },
    delFile1(uid) {
      this.changeFileList1.map((item, index) => {
        if (item.uid == uid) {
          let a = this.changeFileList1.splice(index, 1);
          console.log(a);
        }
      });
    },
    delFile2(uid) {
      this.changeFileList2.map((item, index) => {
        if (item.uid == uid) {
          let a = this.changeFileList2.splice(index, 1);
          console.log(a);
        }
      });
    },
    async uploadFile1(params) {
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(255, 255, 255, 0.7)",
      });
      let fd = new FormData();
      fd.append("project_id", this.id);
      fd.append("week_finished", this.form2.week_finished);
      fd.append("week_unfinished", this.form2.week_unfinished);
      fd.append("next_plan", this.form2.next_plan);
      fd.append("file_name", params.file.name);
      fd.append("file", params.file);
      try {
        let res = await EditWeekly(fd);
        console.log(res);
        if (res.code == 0) {
          loading.close();
          this.$message.success(res.msg);
          setTimeout(() => {
            this.$router.go(-1);
          }, 500);
        } else {
          loading.close();
          this.$message.error(res.msg);
        }
      } catch {
        this.fileList1 = [];
        this.changeFileList1 = [];
        loading.close();
      }
    },

    async uploadFile2(params) {
      this.files.push({ params: params });
      if (this.files.length == 2) {
        const loading = this.$loading({
          lock: true,
          text: "Loading",
          spinner: "el-icon-loading",
          background: "rgba(255, 255, 255, 0.7)",
        });
        let fd = new FormData();
        fd.append("project_id", this.id);
        fd.append("month_finished", this.form3.month_finished);
        fd.append("month_sum", this.form3.month_sum);
        fd.append("next_plan", this.form3.next_plan);
        fd.append("file_name1", this.files[0].params.file.name);
        fd.append("file1", this.files[0].params.file);
        fd.append("file_name2", this.files[1].params.file.name);
        fd.append("file2", this.files[1].params.file);
        // console.log(this.files[0].params.file);
        // console.log(this.files[1].params.file);
        // return;
        try {
          let res = await EditMonth(fd);
          if (res.code == 0) {
            this.files = [];
            loading.close();
            this.$message.success(res.msg);
            setTimeout(() => {
              this.$router.go(-1);
            }, 500);
          } else {
            this.files = [];
            loading.close();
            this.$message.error(res.msg);
          }
        } catch {
          this.files = [];
          this.fileList2 = [];
          this.changeFileList2 = [];
          loading.close();
        }
      }
    },

    save() {
      if (this.type == 0) {
        if (
          this.form1.day_finished == "" &&
          this.form1.day_unfinished == "" &&
          this.form1.coordinate == "" &&
          this.form1.remark == ""
        ) {
          this.$message.warning("请至少填写一项内容！");
          return;
        }
        this.pushEditDaily();
      } else if (this.type == 1) {
        if (
          this.form2.week_finished == "" &&
          this.form2.week_unfinished == "" &&
          this.form2.next_plan == ""
        ) {
          this.$message.warning("请至少填写一项内容！");
          return;
        }
        this.pushEditWeekly();
      } else if (this.type == 2) {
        if (
          this.form3.month_finished == "" &&
          this.form3.month_sum == "" &&
          this.form3.next_plan == ""
        ) {
          this.$message.warning("请至少填写一项内容！");
          return;
        }
        this.pushEditMonth();
      } else if (this.type == 3) {
        if (
          this.form4.quarter_special == "" &&
          this.form4.problem == "" &&
          this.form4.solution_way == "" &&
          this.form4.remark == ""
        ) {
          this.$message.warning("请至少填写一项内容！");
          return;
        }
        this.pushEditQuarter();
      } else if (this.type == 4) {
        if (
          this.form5.half_year_finished == "" &&
          this.form5.half_year_sum == "" &&
          this.form5.next_plan == "" &&
          this.form5.remark == ""
        ) {
          this.$message.warning("请至少填写一项内容！");
          return;
        }
        this.pushEditHalfYear();
      } else if (this.type == 5) {
        if (
          this.form6.year_finished == "" &&
          this.form6.year_sum == "" &&
          this.form6.next_plan == "" &&
          this.form6.remark == ""
        ) {
          this.$message.warning("请至少填写一项内容！");
          return;
        }
        this.pushEditYear();
      }
    },
    async pushEditDaily() {
      let res = await EditDaily({
        project_id: this.id,
        day_finished: this.form1.day_finished,
        day_unfinished: this.form1.day_unfinished,
        coordinate: this.form1.coordinate,
        remark: this.form1.remark,
      });

      if (res.code == 0) {
        this.$message.success(res.msg);
        setTimeout(() => {
          this.$router.go(-1);
        }, 500);
      } else {
        this.$message.error(res.msg);
      }
    },
    async pushEditWeekly() {
      this.$refs.upload1.submit();
    },
    async pushEditMonth() {
      this.$refs.upload2.submit();
    },
    async pushEditQuarter() {
      let res = await EditQuarter({
        project_id: this.id,
        quarter_special: this.form4.quarter_special,
        problem: this.form4.problem,
        solution_way: this.form4.solution_way,
        remark: this.form4.remark,
      });

      if (res.code == 0) {
        this.$message.success(res.msg);
        setTimeout(() => {
          this.$router.go(-1);
        }, 500);
      } else {
        this.$message.error(res.msg);
      }
    },
    async pushEditHalfYear() {
      let res = await EditHalfYear({
        project_id: this.id,
        half_year_finished: this.form5.half_year_finished,
        half_year_sum: this.form5.half_year_sum,
        next_plan: this.form5.next_plan,
        remark: this.form5.remark,
      });

      if (res.code == 0) {
        this.$message.success(res.msg);
        setTimeout(() => {
          this.$router.go(-1);
        }, 500);
      } else {
        this.$message.error(res.msg);
      }
    },
    async pushEditYear() {
      let res = await EditYear({
        project_id: this.id,
        year_finished: this.form6.year_finished,
        year_sum: this.form6.year_sum,
        next_plan: this.form6.next_plan,
        remark: this.form6.remark,
      });
      if (res.code == 0) {
        this.$message.success(res.msg);
        setTimeout(() => {
          this.$router.go(-1);
        }, 500);
      } else {
        this.$message.error(res.msg);
      }
    },
  },
};
</script>
<style lang="less" scoped>
.project-main {
  background: #fafafa;
  height: 100%;
  overflow: hidden;
  text-align: left;
}
.content {
  padding: 0 30px;
  margin: 0 auto;
  max-width: 1500px;
  height: 100%;
  background: #ffffff;
  box-shadow: 0px 0px 10px 0px rgba(189, 189, 189, 0.6);
  overflow: hidden;
}
.header {
  position: relative;
  height: 60px;
  line-height: 60px;
  border-bottom: 4px solid rgba(204, 204, 204, 0.35);
  span.title {
    display: inline-block;
    height: 60px;
    font-size: 20px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #446db3;
    border-bottom: 4px solid #446db3;
    cursor: default;
  }
  span.back {
    position: absolute;
    right: 0;
    top: 9px;
    width: 100px;
    height: 38px;
    line-height: 38px;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #ffffff;
    background: #5889dc;
    border-radius: 4px;
    text-align: center;
    cursor: pointer;
  }
}
.tips {
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #999999;
  line-height: 70px;
  span {
    margin: 0 118px 0 0;
  }
}
.title-info {
  font-size: 18px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #333333;
}
/deep/ .el-form {
  padding-top: 10px;
}
/deep/ .el-form--label-top .el-form-item__label {
  padding: 0;
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #666666;
  line-height: 36px;
  opacity: 0.8;
}
/deep/ .el-form-item {
  margin-bottom: 0;
}
/deep/ .el-input__inner {
  height: 32px;
  background: #ffffff;
  border: 1px solid rgba(204, 204, 204, 0.85);
  border-radius: 5px;
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #333333;
}
.flex-form {
  display: flex;
  justify-content: space-between;
  /deep/ .el-form-item {
    flex: 0 0 420px;
  }
  /deep/ .el-textarea__inner {
    height: 120px;
  }
}
/deep/ .el-textarea__inner {
  resize: none;
  height: 90px;
  border: 1px solid rgba(204, 204, 204, 0.85);
}

/deep/ .el-button {
  display: block;
  padding: 0;
  margin: 40px auto 0;
  width: 100px;
  height: 40px;
  line-height: 40px;
  background: #446db3;
  border-radius: 8px;
  font-size: 20px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #ffffff;
}
.w-960 {
  width: 930px;
}
.files {
  flex: 1;
  margin-top: 20px;
  .label-name {
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #666666;
  }
  /deep/.el-upload__tip {
    margin-left: 16px;
    display: inline-block;
    font-size: 12px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #999999;
  }
  .upload-demo {
    min-height: 60px;
  }
  /deep/ .el-button {
    margin-top: 20px;
  }
  /deep/ .el-button--small {
    padding: 0;
    width: 133px;
    height: 38px;
    line-height: 38px;
    background: #5889dc;
    border-radius: 4px;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #ffffff;
    vertical-align: middle;
    img {
      margin-right: 5px;
      position: relative;
      left: 0;
      top: 1px;
    }
  }
}
.pdf-box {
  height: 260px;
  flex: 0 0 49%;
  .pdf-title {
    font-size: 18px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #333333;
    height: 60px;
    line-height: 60px;
  }
}
.pdf {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 999;
  iframe {
    margin-top: 0 !important;
    width: 100%;
    height: 100%;
  }
  .full {
    position: absolute;
    top: 70px;
    right: 150px;
    width: 60px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    border-radius: 10px;
    color: #fff;
    background-color: #5889dc;
    z-index: 999;
    cursor: pointer;
  }
  .exit {
    position: absolute;
    top: 70px;
    right: 40px;
    width: 80px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    color: #fff;
    background-color: #5889dc;
    z-index: 999;
    border-radius: 10px;
    cursor: pointer;
  }
}
.isAll {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
}
.file-list {
  height: 36px;
  line-height: 36px;
  cursor: default;
  span,
  img {
    vertical-align: middle;
  }
  span {
    font-family: Microsoft YaHei;
    font-weight: 400;
  }
  .name {
    display: inline-block;
    max-width: 260px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin: 0 14px;
    font-size: 16px;
    color: #666666;
  }
  .s {
    margin: 0 10px 0 6px;
    font-size: 14px;
    color: #999999;
  }
  .d {
    margin: 0 0 0 6px;
    font-size: 14px;
    color: #999999;
  }
}
.placeholder-height {
  min-height: 70px;
}
.file-show {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #fff;
  z-index: 999999;
  .gb {
    position: absolute;
    right: 50px;
    top: 80px;
    font-size: 18px;
    display: inline-block;
    width: 100px;
    height: 40px;
    line-height: 40px;
    font-weight: 400;
    background: #446db3;
    color: #ffffff;
    border-radius: 8px;
    text-align: center;
    cursor: pointer;
  }
  .word,
  iframe {
    width: 100vw;
    height: 100vh;
    overflow: auto;
  }
}
/*
  *常用电脑尺寸  1680 * 900
  *              1536 * 864
  *              1440 * 900
  *ipad pro      1366 * 1024
  *ipad mini     1024 * 768
  *ipad          1024 * 768
 */
/*分辨率低于1680，采用下面的样式*/
@media screen and (max-device-width: 1680px) {
  /deep/ .el-textarea__inner {
    height: 80px;
  }
}
/*分辨率低于1536，采用下面的样式*/
@media screen and (max-device-width: 1536px) {
  /deep/ .el-textarea__inner {
    height: 60px;
  }
}
/*分辨率低于1440，采用下面的样式*/
@media screen and (max-device-width: 1440px) {
  /deep/ .el-textarea__inner {
    height: 80px;
  }
}
/*分辨率低于1366，采用下面的样式*/
@media screen and (max-device-width: 1366px) {
  /deep/ .el-textarea__inner {
    height: 90px;
  }
}
/*分辨率低于1180，采用下面的样式*/
@media screen and (max-device-width: 1180px) {
  /deep/ .el-textarea__inner {
    height: 60px;
  }
}
/*分辨率低于1024，采用下面的样式*/
@media screen and (max-device-width: 1024px) {
  .pdf-box {
    height: 200px;
  }
  .el-button {
    margin: 20px auto 0;
  }
  .placeholder-height {
    min-height: 56px;
  }
  .file-list {
    height: 28px;
    line-height: 28px;
  }
  .files .label-name {
    font-size: 14px;
    line-height: 14px;
  }
}
</style>
